import Phaser from 'https://gitee.com/kiraking/ghl/raw/master/src/lib/phaser.js'

export default class Choose extends Phaser.Scene {
	status = 0;

	card_sound
	button_sound

	choose_title

	confirm

	card1
	card2
	card3
	card4


	constructor() {
		super('choose')
	}



	preload() {

		this.load.audio('card_sound', 'https://gitee.com/kiraking/ghl/raw/master/assets/sfx/card_sound.mp3')
		this.load.audio('button_sound', 'https://gitee.com/kiraking/ghl/raw/master/assets/sfx/button_sound.mp3')

		this.load.image('choose_title', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/choose_title.png')

		this.load.spritesheet('card1', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/card1.png', {
			frameWidth: 142,
			frameHeight: 215
		})
		this.load.spritesheet('card2', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/card2.png', {
			frameWidth: 142,
			frameHeight: 215
		})
		this.load.spritesheet('card3', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/card3.png', {
			frameWidth: 142,
			frameHeight: 215
		})
		this.load.spritesheet('card4', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/card4.png', {
			frameWidth: 142,
			frameHeight: 215
		})
		this.load.spritesheet('confirm', 'https://gitee.com/kiraking/ghl/raw/master/assets/choose/confirm.png', {
			frameWidth: 93,
			frameHeight: 47
		})

	}

	create() {


		const { height, width } = this.game.config;

		const margin = 90;

		const card_y = 300;

		this.card_sound = this.sound.add('card_sound', { volume: 0.2 });
		this.button_sound = this.sound.add('button_sound', { volume: 0.2 });

		this.choose_title = this.add.image(width / 2, 85, 'choose_title').setScale(1.2);

		this.card1 = this.add.sprite((width + 2 * margin) / 5 - margin, card_y, 'card1', 0)
			.setScale(1.5)
			.setInteractive();
		this.card1.on('pointerdown', () => { this.card_sound.play();this.revertCard(1) })

		this.card2 = this.add.sprite((width + 2 * margin) / 5 * 2 - margin, card_y, 'card2', 0)
			.setScale(1.5)
			.setInteractive();
		this.card2.on('pointerdown', () => { this.card_sound.play();this.revertCard(2) })

		this.card3 = this.add.sprite((width + 2 * margin) / 5 * 3 - margin, card_y, 'card3', 0)
			.setScale(1.5)
			.setInteractive();
		this.card3.on('pointerdown', () => { this.card_sound.play();this.revertCard(4) })

		this.card4 = this.add.sprite((width + 2 * margin) / 5 * 4 - margin, card_y, 'card4', 0)
			.setScale(1.5)
			.setInteractive();
		this.card4.on('pointerdown', () => { this.card_sound.play();this.revertCard(8) })

		this.confirm = this.add.sprite(width / 2, 530, 'confirm', 0)
			.setScale(1.5)
			.setInteractive();
		this.confirm.on('pointerdown', () => { if(this.status != 0){ 
			this.button_sound.play();
			this.scene.start('game', {status: this.status}) 
		}})

		this.initAnims();

	}


	revertCard(num) {

		if (this.status == num) { return; }

		switch (this.status) {
			case 0:
				break;
			case 1:
				this.card1.play('card1_revert');
				break;
			case 2:
				this.card2.play('card2_revert');
				break;
			case 4:
				this.card3.play('card3_revert');
				break;
			case 8:
				this.card4.play('card4_revert');
				break;
		}

		this.status = 0;

		switch (num) {

			case 1:
				this.card1.play('card1');
				this.status |= 1;
				break;
			case 2:
				this.card2.play('card2');
				this.status |= 2;
				break;
			case 4:
				this.card3.play('card3');
				this.status |= 4;
				break;
			case 8:
				this.card4.play('card4');
				this.status |= 8;
				break;
		}

		this.confirm.setFrame(1);

	}



	initAnims() {
		this.anims.create({
			key: 'card1',
			frames: this.anims.generateFrameNumbers('card1', { start: 0, end: 10 }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card2',
			frames: this.anims.generateFrameNumbers('card2', { start: 0, end: 10 }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card3',
			frames: this.anims.generateFrameNumbers('card3', { start: 0, end: 10 }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card4',
			frames: this.anims.generateFrameNumbers('card4', { start: 0, end: 10 }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card1_revert',
			frames: this.anims.generateFrameNumbers('card1', { frames: [ 7, 5, 3, 2, 1, 0 ] }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card2_revert',
			frames: this.anims.generateFrameNumbers('card2', {  frames: [ 7, 5, 3, 2, 1, 0 ] }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card3_revert',
			frames: this.anims.generateFrameNumbers('card3', {  frames: [ 7, 5, 3, 2, 1, 0 ] }),
			frameRate: 12,
			repeat: 0
		})

		this.anims.create({
			key: 'card4_revert',
			frames: this.anims.generateFrameNumbers('card4', {  frames: [ 7, 5, 3, 2, 1, 0 ] }),
			frameRate: 12,
			repeat: 0
		}) 
	}

	update() {

	}
}